@import '../../style/themes/index';
@import './token.less';

@checkbox-prefix-cls: ~'@{kd-prefix}-checkbox';
@checkbox-group-prefix-cls: ~'@{kd-prefix}-group';

.@{checkbox-prefix-cls} {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
  font-size: @checkbox-font-size;
  color: @checkbox-font-color;
  line-height: 18px;
  &-no-child {
    height: @checkbox-default-input-height;
    width: @checkbox-default-input-width;
    box-sizing: border-box;
  }
  &-group > *:not(:last-child) {
    margin-right: @checkbox-group-margin-right;
  }
  &-input {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    cursor: inherit;
    opacity: 0;
    inset: 0;
    z-index: 1;
  }
  &-children {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    user-select: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: @checkbox-default-input-label-max-width;

    .kd-input-underline {
      background-color: transparent;
      border-bottom: none;
    }
  }
}

.@{checkbox-prefix-cls}-square {
  border-radius: 2px;
  border: 1px solid @checkbox-border-color;
  padding: @checkbox-square-padding-horizontal @checkbox-square-padding-vertical;
  transition: color @checkbox-transition-duration, border-color @checkbox-transition-duration;
  &:not(&-disabled)::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    opacity: 0.2;
    box-shadow: 0 0 0 0 @checkbox-color-theme;
  }
  &:hover {
    color: @checkbox-checked-font-color;
    border-color: @checkbox-checked-border-color;
  }
  &-triangle,
  &-triangle-checked {
    position: absolute;
    content: '';
    height: 0;
    width: 0;
    right: 0;
    bottom: 0;
    border-style: solid;
    border-width: 0 0 @checkbox-square-triangle-height @checkbox-square-triangle-width;
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
    border-bottom-color: @checkbox-checked-border-color;
  }
  &-triangle {
    animation: kdZoomBounceLeaveEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0,.4,.4,1) forwards;
    transition: all @checkbox-transition-duration cubic-bezier(0.4,0,0.6,1);
    visibility: hidden;
    opacity: 0;
  }
  &-inner {
    position: absolute;
    height: 9px;
    width: 11px;
    color: @checkbox-square-input-icon-color;
    font-size: @checkbox-square-input-icon-size;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translate(-100%, 100%);
  }
  &-inner-icon {
    font-size: inherit;
    line-height: 100%;
    animation: kdZoomLeaveEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0,.4,.4,1);
  }
  &-triangle-disabled {
    border-bottom-color: @checkbox-disabled-text-color;
  }

  &-disabled,
  &-disabled:hover {
    border-color: @checkbox-border-color;
    color: @checkbox-disabled-text-color;
    background-color: @checkbox-disabled-bg-color;
    cursor: not-allowed !important;
  }
  &-checked {
    border-color: @checkbox-checked-border-color;
    &:not(&-disabled)::after {
      animation: fadeEffect calc(@checkbox-transition-duration + 0.1s) cubic-bezier(0,.4,.4,1) forwards,
        waveEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0,.4,.4,1) forwards;
    }
    .@{checkbox-prefix-cls}-square-triangle-checked:not(.@{checkbox-prefix-cls}-square-disabled) {
      animation: kdZoomBounceEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0.4,0,0.6,1);
    }
    .@{checkbox-prefix-cls}-square-inner-icon:not(.@{checkbox-prefix-cls}-square-disabled) {
      animation: kdZoomEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0,.4,.4,1);
    }
  }
  &-checked-disabled {
    background-color: @checkbox-disabled-bg-color !important;
    border-color: @checkbox-disabled-bg-color !important;
    cursor: not-allowed !important;
  }
  &-wrapper {
    display: inline-flex;
    height: @checkbox-default-input-height;
    width: 0;
    box-sizing: border-box;
    opacity: 0;
  }
  &.checked {
    .@{checkbox-prefix-cls}-children {
      color: @checkbox-font-color;
    }
  }
}

.@{checkbox-prefix-cls}-default {
  border: none;
  padding: @checkbox-default-padding;
  transition: color @checkbox-transition-duration, border-color @checkbox-transition-duration;
  &:hover,
  &:hover &-wrapper {
    color: @checkbox-checked-font-color;
    border-color: @checkbox-checked-border-color;
    cursor: pointer;
  }
  &-disabled,
  &-disabled:hover,
  &-disabled:hover &-wrapper {
    color: @checkbox-disabled-text-color;
    border-color: @checkbox-border-color;
    cursor: not-allowed !important;
  }

  &-wrapper {
    position: relative;
    display: inline-flex;
    background-color: @checkbox-bg-color;
    border: @checkbox-default-input-border-width solid @checkbox-border-color;
    border-radius: @checkbox-default-input-border-radius;
    box-sizing: border-box;
    transition: color @checkbox-transition-duration, border-color @checkbox-transition-duration;
    flex-shrink: 0;
    &:not(&-disabled)::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border-radius: inherit;
      opacity: 0.2;
      box-shadow: 0 0 0 0 @checkbox-color-theme;
    }
  }
  &-wrapper-size {
    height: @checkbox-default-input-height;
    width: @checkbox-default-input-width;
  }

  &-margin {
    margin-right: @checkbox-default-input-margin-right;
  }
  &-checked-disabled {
    background-color: @checkbox-default-disabled-color-bg !important;
    border-color: @checkbox-default-disabled-color-border !important;
    cursor: not-allowed !important;

    .@{checkbox-prefix-cls}-default-inner {
      color: @checkbox-disabled-text-color;
    }
  }
  &-checked {
    background-color: @checkbox-checked-border-color;
    border-color: @checkbox-checked-border-color;
    transition: background-color calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0,.4,.4,1),
      border-color calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0,.4,.4,1);
    &:not(&-disabled)::after {
      animation: fadeEffect calc(@checkbox-transition-duration + 0.1s) cubic-bezier(0,.4,.4,1) forwards,
        waveEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0,.4,.4,1) forwards;
    }
    .@{checkbox-prefix-cls}-default-inner:not(&-disabled .@{checkbox-prefix-cls}-default-inner) {
      animation: kdZoomBounceDefaultEffect calc(@checkbox-transition-duration - 0.1s) cubic-bezier(0.4,0,0.6,1) !important;
    }
  }
  &-inner {
    position: absolute;
    color: @checkbox-default-input-icon-color;
    font-size: @checkbox-default-input-icon-size;
    height: 100%;
    width: 100%;
    top: 5%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  &-inner-icon {
    font-size: inherit;
    line-height: 100%;
  }
  &-indeterminate::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: @checkbox-default-indeterminate-square;
    height: @checkbox-default-indeterminate-square;
    background-color: @checkbox-checked-border-color;
    border: 0;
    transform: translate(-50%,-50%) scale(1);
    opacity: 1;
    content: " ";
  }
  &.checked {
    .@{checkbox-prefix-cls}-children {
      color: @checkbox-font-color;
    }
  }
  &-indeterminate {
    .@{checkbox-prefix-cls}-children {
      color: @checkbox-font-color;
    }
  }
}
